<template>
  <div style="flex: 1.6;position: relative;margin-top: 2rem;margin-left: .5rem" class="colorF">
    <div class="title flex"><i class="title_line"></i><span>客流眼实时画面</span>
      <p class="selectBox"></p>
    </div>
    <ul class="videoList">
      <li
        class="colorF font_s14 videoItem"
        v-for="(item, index) in videoInfoNew"
        :key=index>
        <p class="videoTitle">入园：
          <span style="color: #AEE9FE;margin-right: 1rem">{{ item.area1_num }}</span>
          在园：
          <span style="color: #AEE9FE">{{ item | inPeopleNum }}</span>
        </p>
        <div class="videoStyle" @click="fangda(item.serialno, index)">
          <MyVideo3 :imgSn=item.serialno :closeType=closeType :heightStyle=heightStyle :indexItem=index />
          <img src="../../assets/img/dataSea/fangda.png" alt="" style="position: absolute;left: 1rem;bottom: 7%"/>
        </div>
        <p style="color: #969BAE;text-align: center" class="font_s20">{{ item.cemeteryname }}</p>
      </li>
    </ul>
    <div class="videoShow" v-if="fangdaMode" >
      <my-video4  :imgSn="videoId" :NunString="NunString" :heightStyle="heightStyle2" />
      <img src="../../assets/img/dataSea/suo.png"
           alt=""
           style="position: absolute;left: 1rem;bottom: 7%"
           @click="suoClick"/>
    </div>
     <div class="nextType cursor">
      <span v-if="current > 1"
        :class="{nextFun: nextFun2===1}"
        style="padding-right: 1.3rem"
        @click="getData(current-1)">上一页</span>
      <span v-if="current !==total"
        :class="{nextFun: nextFun2===2}"
        style="padding-right: 1.3rem"
        @click="getData(current+1)">下一页</span>
    </div>
  </div>
</template>

<script>
import { getPoineAreaAllNumList, queryPeopleNum } from '@/api/home'
import MyVideo4 from "./MyVideo4";
import MyVideo3 from "../comprehensive/MyVideo3";
export default {
  name: 'DataSeaCenter',
  components: {MyVideo3, MyVideo4},
  filters: {
    inPeopleNum(item) {
      let comeNum = parseInt(item.area1_num)
      let inNum = parseInt(item.area2_num)
      let num = comeNum - inNum
      return num
    }
  },
  data () {
    return {
      indexItem: 0,
      heightStyle: '11.1875rem',
      heightStyle2: '57vh',
      nextFun: 1,
      nextFun2: 1,
      fullClicked01: false,
      videoId: 'f43fc06e-5267c118',
      fangdaMode: false,
      closeType: -1,
      total: 9,
      current: 1,
      pageSize: 6,
      showWaitingMessage: false,
      videoInfoNew: [],
      videoAllComeNum: 0,
      videoAllInNum: 0,
      NunString: 'Q',
      videoList: [
          {
        ryrs: 12,
        zyrs: 10,
        id: '8E5F3620-A9E28248',
        name: '乐乡'
      }, {
        ryrs: 12,
        zyrs: 10,
        id: '615d9801-bc2485e4',
        name: '永安主入口'
      }, {
        ryrs: 12,
        zyrs: 10,
        id: '5f1e9f04-76a582d6',
        name: '永安西走廊'
      }, {
        ryrs: 12,
        zyrs: 10,
        id: '7fe90d79-2de01adc',
        name: '东沟乡静园'
      }, {
        ryrs: 12,
        zyrs: 10,
        id: '959b6c15-86a0bb87',
        name: '洋泾乡安息堂'
      }, {
        ryrs: 12,
        zyrs: 10,
        id: 'f5458d84-5a0de5c8',
        name: '金桥安息堂'
      }
      ],
      videoList1: [
          {
        ryrs: 12,
        zyrs: 10,
        name: '东沟静园'
      }, {
        ryrs: 12,
        zyrs: 10,
        name: '长桥山庄'
      }, {
        ryrs: 12,
        zyrs: 10,
        name: '华南公墓'
      }, {
        ryrs: 12,
        zyrs: 10,
        name: '界龙古园'
      }, {
        ryrs: 12,
        zyrs: 10,
        name: '汇龙园'
      }, {
        ryrs: 12,
        zyrs: 10,
        name: '天逸静园公墓'
      }],
      videoList2: [
          {
        ryrs: 12,
        zyrs: 10,
        id: 'a47f9f01-bf9ff4b0',
        name: '西山湾安息堂'
      }, {
        ryrs: 12,
        zyrs: 10,
        id: '78cd6296-2e579275',
        name: '界龙公墓'
      }, {
        ryrs: 12,
        zyrs: 10,
        id: 'f43fc06e-5267c118',
        name: '三林静园'
      }]
    }
  },
  mounted () {
    if (sessionStorage.getItem('videoInfoNew') && sessionStorage.getItem('videoTotal')) {
      console.log('哈哈')
      this.videoInfoNew = JSON.parse(sessionStorage.getItem('videoInfoNew'))
      this.total = JSON.parse(sessionStorage.getItem('videoTotal'))
    } else {
      this.$nextTick(() => this.getData(1))
    }
  },
  methods: {
    async getData (current) {
      this.videoInfoNew = []
      this.current = current
      const params = { page: this.current+ '', rows: this.pageSize + '' }
      getPoineAreaAllNumList(params).then((response) => {
        if (response.data.data) {
          this.videoInfoNew = response.data.data.rows
          this.total = parseInt(response.data.data.total)
          if (this.current === 1) {
            sessionStorage.setItem('videoInfoNew', JSON.stringify(this.videoInfoNew))
            sessionStorage.setItem('videoTotal', JSON.stringify(this.total))
          }
        }
      }).catch((response) => {
        console.log(response)
      })
    },
    topClick (index) {
      if (index === 1) {
        this.current = 1
      } else {
        this.current = this.current - 1
      }
      // this.nextFun2 = this.currentPage
      // console.log('当前页数', index + '****' + this.current + '***前进后退***' )
      this.getData()
    },
    nextClick (index) {
      if (index === 3) {
        this.current = 3
      } else {
        this.current = this.current + 1
      }
      // console.log('当前页数', index + '****' + this.current + '***前进后退***')
      this.getData()
      // this.nextFun2 = this.currentPage
    },
    suoClick () {
      this.fangdaMode = false
      sessionStorage.clear()
    },
    fangda (imgUrl, typeId) {
      this.closeType = typeId
      this.fangdaMode = true
      this.videoId = imgUrl
    },
    jump (index) {
      this.current = index
      // this.getData()
    },
    getPageSize (pageSize) {
      this.current = 1
      this.pageSize = pageSize
      // this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
  .title {
    height: 2.8125rem;
    line-height: 2.8125rem;
    padding-left: 1rem;
    position: relative;
    background: url("../../assets/img/zhjg/ic_baioqian.png") no-repeat;
    background-size: 100% 100%;
    font-family: PingFang SC;
    .title_line {
      width: 3px;
      height: 1.125rem;
      margin-top: .84375rem;
      margin-right: .6rem;
      background: linear-gradient(0deg, #87CCED, #D8FBFE);
    }
    span{
      font-weight: bold;
      color: #97E2F4;
      background: linear-gradient(0deg, #87CCED 0%, #D8FBFE 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .nextType {
    position: absolute;
    top: 0;
    right: 1rem;
    height: 2.8125rem;
    line-height: 2.8125rem;
  }
  .fullContainer {
    width: 100vw !important;
    height: 100vh !important;
    top: -14vh !important;
    left: -29vw !important;
  }
  .videoList {
    width: 100%;
    height: 94%;
    position: relative;
    overflow: hidden;
    padding: 1rem .4rem;
    box-sizing: border-box;
    margin: 0 auto;
  }
  .videoList li{
    width: 30%;
    margin-right: 3.1%;
    float: left;
    margin-top: 5%;
  }
  .videoList li:nth-child(1), .videoList li:nth-child(2), .videoList li:nth-child(3){
    margin-top: 1%;
  }
  .videoList li:nth-child(3), .videoList li:nth-child(6) {
    margin-right: 0;
  }
  .videoStyle {
    height: 11.1875rem;
    width: 100%;
    position: relative;
  }
  .videoShow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: 0.7);
    z-index: 2;
  }
  .videoTitle {
    background: #121935;
    height: 2.125rem;
    line-height: 2.125rem;
    text-align: center;
  }
  .selectBox {
    position: absolute;
    top: .5rem;
    right: 1rem;
  }
/*  .title {
    line-height: 2.1875rem;
    text-align: left;
    padding-left: 3rem;
    position: relative;
    .title_img {
      width: 1.4375rem;
      margin: 0 .2rem 0 1rem;
      height: 1.75rem;
      position: absolute;
      top: .2rem;
      left: 0rem
    }

  }*/
  .wrapper {
    width: 100%;
    height: 100%;
  }
  /* TL自定义样式 */
  /* 添加粗体 */
  .weightBold {
    font-weight: bold;
  }

  .messageBoxStyle {
    position: absolute;
    top: 46%;
    left: 42.5%;
    color: #ffffff;
  }
</style>
